$.ajax({
        type: 'get',
        url: '/users',
        success: function(res) {
            // console.dir(res);

            let html = template('usersTpl', { usersInfo: res })
            $('#usersBox').html(html)
        }
    })
    //添加用户
    //添加用户头像
$('#modifyBox').on('change', '#avatar', function() {
        let formData = new FormData()
            //this指向$('#avatar)
        formData.append('avatar', this.files[0])
        $.ajax({
            type: 'post',
            url: '/upload',
            data: formData,
            //jqueryajax提交文件固定写法
            processData: false,
            contentType: false,
            success: function(res) {
                $('#preview').prop('src', res[0].avatar)
                    //添加隐藏域
                $('#hiddenAvatar').val(res[0].avatar)
            }
        })
    })
    //添加用户提交不能使用click，用submit事件
    // $('#userForm').on('click', function() {
$('#userForm').on('submit', function() {
        let formData = $(this).serialize()
        $.ajax({
            type: 'post',
            url: '/users',
            data: formData,
            success: function(res) {
                location.reload()
            },
            error: function(err) {
                alert('用户添加失败')
            }
        })
        return false
    })
    //用户信息修改功能
$('#usersBox').on('click', '.edit', function() {
    console.log($(this).attr('data-id'));
    // console.log(this.attr('data-id'));0
    const userId = $(this).attr('data-id')
    $.ajax({
        type: 'get',
        url: `/users/${userId}`,
        success: function(res) {
            // console.log(res);
            // 模板中的res不需要{}包裹，返回的值本身就是对象，相当于解构赋值了
            const html = template('modifyTpl', res)
            $('#modifyBox').html(html)
        }
    })
})

//修改用户头像//不需要在这里在写一次，和上边的头像上传合并到一起
// $('#modifyBox').on('change', '#avatar', function() {
//         const formData = new FormData()
//         console.log($(this));
//         console.log(this.files);


//         formData.append('avatar', this.files[0])
//         $.ajax({
//             type: 'post',
//             url: '/upload',
//             data: formData,
//             processData: false,
//             contentType: false,
//             success: function(res) {
//                 $('#preview').prop('src', res[0].avatar)
//                 $('#hiddenAvatar').val(res[0].avatar)
//             }
//         })
//     })
//修改用户
$('#modifyBox').on('submit', '#modifyForm', function() {
        const formData = $(this).serialize()
        const userId = $(this).attr('data-id')
        console.log(userId);
        // return false
        $.ajax({
            type: 'put',
            url: `/users/${userId}`,
            data: formData,
            success: function(res) {
                console.log(res);

                location.reload()
            },
            error: function(err) {
                alert('用户修改失败')
                console.log(err);

            }
        })
        return false
    })
    //实现用户删除功能
$('#usersBox').on('click', '.remove', function() {
        const userId = $(this).attr('data-id')
        $.ajax({
            type: 'delete',
            url: `/users/${userId}`,
            // processData: false,
            // contentType:false,
            beforeSend: function() {
                if (!confirm('确认删除用户吗？')) {
                    return false
                }
            },
            success: function(res) {
                location.reload()
                    // console.log(res);

            }
        })
    })
    //实现批量删除功能
    //1全选
$('#selectAll').on('change', function() {
    //小复选框跟随全选；首先获得全选框的状态
    const selectAllStatus = $(this).prop('checked')
    $('.userStatus').prop('checked', selectAllStatus)
    if (selectAllStatus) {
        $('#deleteMore').show()
    } else {
        $('#deleteMore').hide()
    }

})
$('#usersBox').on('change', '.userStatus', function() {
    if ($('.userStatus').length === $('.userStatus:checked').length) {
        $('#selectAll').prop('checked', true)
    } else {
        $('#selectAll').prop('checked', false)
    }
    if ($('.userStatus:checked').length > 0) {
        $('#deleteMore').show()
    } else {
        $('#deleteMore').hide()
    }
})
$('#deleteMore').on('click', function() {
    let userIdArr = []
    $('.userStatus:checked').each(function(index, item) {

        userIdArr.push($(item).attr('data-id'))
    })
    $.ajax({
        type: 'delete',
        url: `/users/${userIdArr.join('-')}`,
        beforeSend: function() {
            if (!confirm('确定批量删除？')) {
                return false
            }
        },
        success: function(res) {
            // console.log(res);
            location.reload()

        }
    })
})